<template>
  <div class="config-wx" v-loading="loading">
    <el-form label-position="top" :model="formData" ref="formRef">


      <div class="wx-title">PC端应用配置</div>
      <el-form-item prop="corp_id" label="企业ID" :rules="[
        { required: true, message: '企业ID', trigger: 'blur' },
      ]">
        <el-input v-model="formData.corp_id" placeholder="输入企业ID" style="width: 40%" />
      </el-form-item>
      <el-form-item prop="crm_agent_id" label="应用Agentid" :rules="[
        {
          required: true,
          message: '输入应用Agentid',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="formData.crm_agent_id" placeholder="输入应用Agentid" style="width: 40%" />
      </el-form-item>

      <el-form-item prop="crm_secret" label="应用Secret" :rules="[
        {
          required: true,
          message: '输入应用Secret',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="formData.crm_secret" placeholder="输入应用Secret" style="width: 40%" />
      </el-form-item>
      <el-form-item prop="callback_url" label="扫码登陆返回URL" :rules="[
        {
          required: true,
          message: '输入URL',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="formData.callback_url" placeholder="输入URL" style="width: 40%" />
      </el-form-item>
      <!-- 移动端应用配置 -->
      <div class="wx-title">移动端应用配置</div>
      <el-form-item prop="kh_secret" label="CRM应用Secret" :rules="[
        { required: true, message: 'CRM应用Secret', trigger: 'blur' },
      ]">
        <el-input v-model="formData.kh_secret" placeholder="CRM应用Secret" style="width: 40%" />
      </el-form-item>
      <el-form-item prop="kh_agent_id" label="CRM应用Agentid" :rules="[
        { required: true, message: 'CRM应用Agentid', trigger: 'blur' },
      ]">
        <el-input v-model="formData.kh_agent_id" placeholder="CRM应用Agentid" style="width: 40%" />
      </el-form-item>
      <!--  -->
      <div class="wx-title">企业微信通讯录开发配置</div>

      <el-form-item prop="txl_secret" label="通讯录Secret" :rules="[
        {
          required: true,
          message: '通讯录Secret',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="formData.txl_secret" placeholder="通讯录Secret" style="width: 40%" />
      </el-form-item>
      <!--  -->
      <el-form-item prop="tb_url" label="同步助手回调URL" :rules="[
        {
          required: true,
          message: '同步助手回调URL',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="formData.tb_url" placeholder="同步助手回调URL" style="width: 40%" />
      </el-form-item>
      <!--  -->
      <el-form-item prop="txl_token" label="同步助手Token" :rules="[
        {
          required: true,
          message: '同步助手Token',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="formData.txl_token" placeholder="同步助手Token" style="width: 40%" />
      </el-form-item>

      <!--  -->
      <el-form-item prop="tb_key" label="同步助手EncodingAESKey" :rules="[
        {
          required: true,
          message: '同步助手EncodingAESKey',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="formData.tb_key" placeholder="同步助手EncodingAESKey" style="width: 40%" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { uploadImgApi, certApi } from "@/plugins/api/upload";
import { configAddApi } from "@/plugins/api/system/config";
import { configApi } from "@/plugins/api/login";
import { useCounterStore } from "@/stores/counter.js";
const store = useCounterStore();

let formData = ref({});
//
let formRef = ref(null);
//
let loading = ref(false)
function submit() {
  if (!formRef.value) return;
  formRef.value.validate((valid, fields) => {
    if (valid) {
      let arr = [
        {
          conf_name: "qywechat.corp_id",
          conf_value: formData.value.corp_id,
        },
        {
          conf_name: "qywechat.crm_agent_id",
          conf_value: formData.value.crm_agent_id,
        },
        {
          conf_name: "qywechat.crm_agent_id",
          conf_value: formData.value.crm_agent_id,
        },
        {
          conf_name: "qywechat.crm_secret",
          conf_value: formData.value.crm_secret,
        },
        {
          conf_name: "qywechat.callback_url",
          conf_value: formData.value.callback_url,
        },
        {
          conf_name: "qywechat.txl_secret",
          conf_value: formData.value.txl_secret,
        },
        {
          conf_name: "qywechat.tb_url",
          conf_value: formData.value.tb_url,
        },
        {
          conf_name: "qywechat.txl_token",
          conf_value: formData.value.txl_token,
        },
        {
          conf_name: "qywechat.tb_key",
          conf_value: formData.value.tb_key,
        },
        {
          conf_name: "qywechat.kh_secret",
          conf_value: formData.value.kh_secret,
        },
        {
          conf_name: "qywechat.kh_agent_id",
          conf_value: formData.value.kh_agent_id,
        },
      ];

      loading.value = true;
      configAddApi(arr)
        .then(() => {
          ElMessage.success("提交成功！");
          getConfigApi();
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
let info = ref({});
function getConfigApi() {
  configApi({
    conf_name: "qywechat",
  }).then((data) => {
    formData.value = data.qywechat
  });
}
onMounted(() => {
  getConfigApi();
});
</script>
<style lang="scss" scoped>
.config-wx {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;

  .wx-title {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
  }

  .img-box {
    display: inline-block;
    margin-right: 5px;
    // margin-bottom: 10px;
    width: 148px;
    position: relative;

    img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }

    .occlusion {
      display: none;
      width: 100%;
      height: 140px;
      background: #9e9c9c75;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      text-align: center;

      .del {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 148px;
        color: #464444;
        cursor: pointer;
        font-size: large;

        &:hover {
          color: rgb(130, 131, 133);
        }
      }
    }

    &:hover {
      .occlusion {
        display: block;
      }
    }
  }
}
</style>
